<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          size="small"
          clearable
          placeholder="输入供应商名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.uscc"
          size="small"
          clearable
          placeholder="社会统一信用代码"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.code"
          size="small"
          clearable
          placeholder="输入供应商编号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.contactPerson"
          size="small"
          clearable
          placeholder="输入供应商联系人"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.contactPhone"
          size="small"
          clearable
          placeholder="输入供应商联系人手机"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          placeholder="选择供应商状态"
          style="width: 200px;"
          class="filter-item"
          clearable
          filterable
        >
          <el-option
            v-for="item in dict.supplier_status"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <span slot="left" v-if="!isSelectionMode">
          <router-link :to="{ name: 'User' }">
            <el-button type="primary" class="filter-item" icon="el-icon-plus">
              新增供应商用户账号
            </el-button>
          </router-link>
        </span>
        <span slot="left" v-else>
          <el-button
            type="primary"
            :disabled="crud.selections.length === 0"
            class="filter-item"
            icon="el-icon-plus"
            @click="addSuppliers"
          >
            增加供应商到项目
          </el-button>
        </span>
      </crudOperation>
    </div>
    <el-row :gutter="15">
      <!--角色管理-->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">供应商列表</span>
          </div>
          <el-table
            ref="table"
            v-loading="crud.loading"
            highlight-current-row
            style="width: 100%;"
            :data="crud.data"
            @selection-change="crud.selectionChangeHandler"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" />
            <el-table-column
              prop="name"
              label="名称"
              :show-overflow-tooltip="true"
              min-width="150"
            />
            <el-table-column prop="code" label="供应商编号" width="130" />
            <el-table-column prop="uscc" label="社会统一信用代码" width="150" />
            <el-table-column prop="contactPerson" label="供应商联系人" width="100" />
            <el-table-column prop="contactPhone" label="供应商联系人手机" width="120" />
            <el-table-column prop="legalPerson" label="供应商法人" width="100" />
            <el-table-column prop="companyPhone" label="供应商公司电话" width="120" />
            <el-table-column prop="status" label="供应商状态" width="100px">
              <template slot-scope="scope">
                <span>
                  {{ dict.label.supplier_status[scope.row.status] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="创建者" width="100px" />
            <el-table-column prop="createTime" label="创建日期" width="150px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="150px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-permission="['admin', 'supplier:audit']"
              label="操作"
              width="190px"
              fixed="right"
              v-if="!isSelectionMode"
            >
              <template slot-scope="scope">
                <el-button
                  v-permission="['admin', 'supplier:audit']"
                  @click="auditSupplierBtn(scope.row)"
                >
                  审核和查看
                </el-button>

                <el-button
                  type="danger"
                  v-permission="['admin', 'supplier:del']"
                  @click="delSupplier(scope.row)"
                  icon="el-icon-delete"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
    </el-row>

    <DialogAuditSupplier
      :dialog.sync="dialog"
      :profile="checkSupplierProfile"
      @success="crud.refresh()"
    ></DialogAuditSupplier>
  </div>
</template>

<script>
  import CRUD, { presenter, header, form, crud } from '@crud/crud';
  import rrOperation from '@crud/RR.operation';
  import crudOperation from '@crud/CRUD.operation';
  import pagination from '@crud/Pagination';
  import DialogAuditSupplier from './dialogAuditSupplier';
  import * as SupplierRequest from '@/api/supplier';
  import * as ProjectRequest from '@/api/project';

  const defaultForm = {
    id: null,
    name: null,
    uscc: null,
    code: null,
    contactPerson: null,
    contactPhone: null,
    status: null,
  };
  export default {
    name: 'SupplierList',
    components: { pagination, crudOperation, rrOperation, DialogAuditSupplier },
    cruds() {
      return CRUD({
        title: '供应商',
        url: 'api/supplier/all',
        sort: 'desc',
        optShow: {
          reset: true,
          del: true,
        },
        crudMethod: { ...SupplierRequest },
      });
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['supplier_status'],
    props: {
      mode: {
        type: String,
        default: '',
      },
    },
    computed: {
      isSelectionMode() {
        // 直接返回待办的
        return this.mode === 'selection';
      },
      permission() {
        return this.isSelectionMode
          ? {
              add: [null],
              edit: [null],
              del: [null],
            }
          : {
              del: ['admin', 'supplier:del'],
            };
      },
    },
    data() {
      return {
        dialog: false,
        checkSupplierProfile: null,
      };
    },
    methods: {
      /**
       * 审核供应商窗口
       */
      auditSupplierBtn(row) {
        this.checkSupplierProfile = { ...row, detail: JSON.parse(row.detail) };
        this.dialog = true;
      },
      /**
       * 删除供应商
       */
      delSupplier(row) {
        this.$confirm(`确认删除供应商 ${row.name} 信息?此操作不会删除供应商账号!`, '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger',
        })
          .then(() => {
            return ProjectRequest.delSupplier([row.id]);
          })
          .then(() => {
            this.$message.success(`删除供应商 ${row.name} 信息成功!`);
          });
      },
      addSuppliers() {
        this.$emit('add-supplier', this.crud.selections);
      },
    },
  };
</script>

<style lang="scss" scoped></style>
